<template>
    <div class="page">
        <!-- 搜索 -->
        <div class="searchModel">
            <img src="@/assets/partner/searchIcon.png" />
            <div class="searchIpt">
                <van-field v-model="userPhone" placeholder="请输入合伙人姓名或手机号" />
            </div>
            <div class="searchBtn">搜索</div>
        </div>
        <div class="allNUm">
            <div>共{{ 0 }}台</div>
            <div class="filterItem" style="margin-left: 16px" @click="showPopup">
                筛选
                <img style="width: 14px; height: 14px" src="@/assets/partner/filterIcon.png" />
            </div>
        </div>
        <!-- 列表 -->
        <div style="margin-top: 14px">
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <div class="myInfo">
                    <div class="myInfo-title">
                        <div class="left">
                            <text class="name">测试一级刘阳</text>
                        </div>
                        <div class="right">
                            <img src="@/assets/merchant/toNext.png" alt="" />
                        </div>
                    </div>
                    <div class="it">
                        <div class="row">
                            <div class="label">机具编号</div>
                            <div class="value">
                                DTC98234897
                                <img src="@/assets/merchant/copy.png" alt="" />
                            </div>
                        </div>
                        <div class="row">
                            <div class="label">机具类型</div>
                            <div class="value">4G电签</div>
                        </div>
                        <div class="row">
                            <div class="label">唤醒状态</div>
                            <div class="value" style="color: #66d6ff">已唤醒</div>
                        </div>
                        <div class="row">
                            <div class="label">服务费金额</div>
                            <div class="value">299.00</div>
                        </div>
                    </div>
                </div>
            </van-list>
        </div>
        <van-popup v-model:show="showRight" position="right" :style="{ width: '60%', height: '100%' }">
            <div class="popupContent">
                <div class="title">筛选</div>
                <div>
                    <div style="margin-bottom: 5px">机具号段</div>
                    
                </div>
                <div>
                    <div style="margin-bottom: 5px">机具类型</div>
                    <div style="display: flex; justify-content: space-between">
                        <div @click="onselect(0)" :class="filterAct.type == 0 ? 'activity' : ''" class="filterItem">全部</div>
                        <div @click="onselect(0)" :class="filterAct.type == 1 ? 'activity' : ''" class="filterItem">未唤醒</div>
                        <div @click="onselect(0)" :class="filterAct.type == 1 ? 'activity' : ''" class="filterItem">已唤醒</div>
                    </div>
                </div>
                <div style="margin-top: 20px" @click="selDate">
                    <div style="margin-bottom: 10px">唤醒日期</div>
                    <div class="dateBox">
                        <div class="currentTime">{{ startTime }}</div>
                        <div style="margin: 10px auto">-</div>
                        <div class="currentTime">{{ endTime }}</div>
                    </div>
                </div>
                <div style="margin-top: 20px" @click="selDate">
                    <div style="margin-bottom: 10px">绑定日期</div>
                    <div class="dateBox">
                        <div class="currentTime">{{ startTime }}</div>
                        <div style="margin: 10px auto">-</div>
                        <div class="currentTime">{{ endTime }}</div>
                    </div>
                </div>
                <div class="footer">
                    <div class="reset" @click="onreset">重置</div>
                    <div class="sure" @click="onsure">确定</div>
                </div>
            </div>
        </van-popup>
        <!-- 选择日期 -->
        <van-calendar :allow-same-day="true" v-model:show="showCalendar" type="range" @confirm="onConfirm" />
    </div>
</template>

<script setup lang="ts">
import { formatDate } from '@/utils/filter.js'
const list = ref([])
const loading = ref(false)
const finished = ref(false)
const onLoad = () => {
    // 异步更新数据
    // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    setTimeout(() => {
        for (let i = 0; i < 10; i++) {
            list.value.push(list.value.length + 1)
        }

        // 加载状态结束
        loading.value = false

        // 数据全部加载完成
        if (list.value.length >= 40) {
            finished.value = true
        }
    }, 1000)
}
const showRight = ref(false)
const showPopup = () => {
    showRight.value = true
}
const filterAct = ref({
    type: 0,
    status: 0,
    actStatus: 0
})
const onselect = val => {
    // actFilter.value = val
}
// 日历
const startTime = ref(formatDate(new Date(), 'yyyy-m-d'))
const endTime = ref(formatDate(new Date(), 'yyyy-m-d'))
// formatDate(+new Date(),'yyyy-mm-dd')
const showCalendar = ref(false)
const selDate = () => {
    showCalendar.value = true
}
const onConfirm = values => {
    const [start, end] = values
    startTime.value = formatDate(start, 'yyyy-m-d')
    endTime.value = formatDate(end, 'yyyy-m-d')
    showCalendar.value = false
}
// 筛选完成
const onreset = () => {
    showRight.value = false
}
const onsure = () => {
    showRight.value = false
}
</script>
<style scoped lang="scss">
.page {
    padding: 19px 15px;
    .searchModel {
        display: flex;
        align-items: center;
        padding-left: 10px;
        margin-top: 10px;
        background: #ffffff;
        border-radius: 30px;
        ::v-deep .van-field {
            line-height: 100%;
            padding: 0 !important;
        }
        .searchIpt {
            flex: 1;
            height: 40px;
            display: flex;
            align-items: center;
            margin-left: 10px;
        }
        img {
            width: 16px;
            height: 16px;
        }
        .searchBtn {
            // line-height: 20px;
            padding: 8px 14px;
            background: #66d6ff;
            opacity: 1;
            border-radius: 13px;
            color: #ffffff;
        }
    }
    .allNUm {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 20px 0;
        .ifReal {
            display: flex;
            align-items: center;
            color: #66d6ff;
            .haveReal {
                padding: 7px 10px;
                border-radius: 10px 0px 0px 10px;
                background: #ffffff;
            }
            .noReal {
                padding: 7px 10px;
                border-radius: 0px 10px 10px 0px;
                background: #ffffff;
            }
            .activity {
                background: #66d6ff !important;
                color: #ffffff !important;
            }
        }
    }
    .popupContent {
        padding: 45px 10px 19px;
        .title {
            text-align: center;
            font-size: 18px;
            font-family: SimHei;
            font-weight: 400;
            color: #000000;
            margin-bottom: 21px;
        }
        .filterItem {
            display: inline-block;
            padding: 7px;
            background: #f1f1f1;
            margin-top: 9px;
            border-radius: 4px;
        }
        .activity {
            background: #66d6ff;
            color: #fff;
        }
        .dateBox {
            display: flex;
            // flex-direction: column;
            align-items: center;
            .currentTime {
                padding: 7px 25px;
                background: #f1f1f1;
                color: #66d6ff;
            }
        }
        .footer {
            display: flex;
            justify-content: space-around;
            width: 100%;
            position: absolute;
            bottom: 10px;
            .reset {
                padding: 8px 30px;
                background: #f1f1f1;
            }
            .sure {
                padding: 8px 30px;
                background: #66d6ff;
                color: #fff;
            }
        }
    }
    .myInfo {
        background: #ffffff;
        opacity: 1;
        border-radius: 8px;
        .myInfo-title {
            background: linear-gradient(180deg, #66d6ff 0%, #a9d0fe 100%);
            opacity: 1;
            border-radius: 8px 8px 0px 0px;
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .left {
                display: flex;
                align-items: center;
                .name {
                    font-size: 14px;
                    font-family: SimHei;
                    font-weight: 500;
                    color: #ffffff;
                    opacity: 1;
                }
                .type {
                    background: #66d6ff;
                    opacity: 1;
                    border-radius: 4px;
                    font-size: 10px;
                    font-weight: 500;
                    padding: 5px;
                    margin-left: 7px;
                    font-family: SimHei;
                    color: #ffffff;
                }
            }
            .right {
                font-size: 14px;
                font-weight: 400;
                color: #ffffff;
                opacity: 1;
                img {
                    width: 14px;
                    margin-left: 5px;
                    height: 14px;
                }
            }
        }
    }
    .it {
        padding: 10px;
        background: #ffffff;
        opacity: 1;
        border-radius: 8px;
        .row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 0;
            .label {
                font-size: 14px;
                font-weight: 400;
                line-height: 0px;
                color: #979797;
                opacity: 1;
            }
            .value {
                font-size: 14px;
                font-weight: 400;
                color: #212121;
                display: flex;
                align-items: center;
                opacity: 1;
                img {
                    margin-left: 5px;
                    width: 14px;
                    height: 14px;
                }
            }
        }
    }
}
</style>
